<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/weui.css">
	<!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/example.css"> -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<style type="text/css">
		.page, body {
		    background-color: #FBF9FE;
		}
		.hd {
		    padding: 2em 0;
		}
		.page.button .page_title, .page.cell .page_title {
		    color: #225FBA;
		}
		.page_title {
		    text-align: center;
		    font-size: 34px;
		    color: #3CC51F;
		    font-weight: 400;
		    margin: 0 15%;
		}
		.page .bd {
		    padding-bottom: 30px;
		}
		.weui_toast_content {
		    margin: 0 auto;
		    padding: 2.5em 1em;
		}
	</style>
</head>
<body ontouchstart>
    <div class="page">
	    <div class="hd">
	        <h1 class="page_title">会员充值</h1>
	    </div>
        <!-- 第一步：选择卡号 -->
	    <div class="bd step1">
	        <div class="weui_cells_title">输入或选择卡号</div>
	        <div class="weui_cells weui_cells_form">
	        	<div class="weui_cell">
                    <div class="weui_cell_hd"><label for="" class="weui_label">卡号</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input" type="number" name="card_number" id="card_number" placeholder="请输入卡号" value="">
                    </div>
                    <div class="weui_cell_ft" style="display: none">
                        <i class="weui_icon_warn"></i>
                    </div>
                </div>
	        </div>

	        <div class="weui_btn_area">
	            <a class="weui_btn weui_btn_primary" href="javascript:step1_post();">确认卡号</a>
	        </div>

	        <div class="weui_cells_title">从卡号列表选取卡号</div>
	        <div class="weui_cells weui_cells_access bind_list">
	        	<!-- 已绑定的卡号列表 -->
            </div>
	    </div>
        <!-- 第二步：获取卡号信息并充值 -->
	    <div class="bd step2" style="display: none;">
	        <div class="weui_cells_title">填写充值金额与卡号信息</div>
	        <div class="weui_cells">
	        	<div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>充值卡号</p>
                    </div>
                    <div class="weui_cell_ft step2-card_number">{充值卡号}</div>
                </div>
	        	<div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>所属机构</p>
                    </div>
                    <div class="weui_cell_ft step2-logistics_name">{所属机构}</div>
                </div>
	        	<div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>卡内余额</p>
                    </div>
                    <div class="weui_cell_ft step2-card_balance">{卡内余额}</div>
                </div>
	        </div>
	        <div class="weui_cells_title">持卡会员信息</div>
	        <div class="weui_cells weui_cells_form">
	        	<div class="weui_cell">
                    <div class="weui_cell_hd"><label for="" class="weui_label">会员姓名</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input step2-vip_name" type="text" name="vip_name" placeholder="请输入会员姓名" value="{会员姓名}">
                    </div>
                    <div class="weui_cell_ft" style="display: none">
                        <i class="weui_icon_warn"></i>
                    </div>
                </div>
	        	<div class="weui_cell">
                    <div class="weui_cell_hd"><label for="" class="weui_label">会员手机</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input step2-vip_phone" type="text" name="vip_phone" placeholder="请输入会员手机" value="{会员手机}">
                    </div>
                    <div class="weui_cell_ft" style="display: none">
                        <i class="weui_icon_warn"></i>
                    </div>
                </div>
	        	<div class="weui_cell">
                    <div class="weui_cell_hd"><label for="" class="weui_label">会员车牌</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input step2-vip_plate_number" type="text" name="vip_plate_number" placeholder="请输入会员车牌" value="{会员车牌}">
                    </div>
                    <div class="weui_cell_ft" style="display: none">
                        <i class="weui_icon_warn"></i>
                    </div>
                </div>
	        </div>
	        <div class="weui_cells_title">持卡会员信息</div>
    	        <div class="weui_cells weui_cells_form">
    	        	<div class="weui_cell">
                        <div class="weui_cell_hd"><label for="" class="weui_label">充值金额</label></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <input class="weui_input" type="number" name="recharge_price" placeholder="请输入充值金额" value="">
                        </div>
                        <div class="weui_cell_ft" style="display: none">
                            <i class="weui_icon_warn"></i>
                        </div>
                    </div>
    	        </div>
	        <div class="weui_btn_area">
	            <a class="weui_btn weui_btn_primary" href="javascript:step2_post();">立即充值</a>
	        </div>

	    </div>
        <!-- 第三步：充值成功 -->
	    <div class="bd step3" style="display: none;">
            <div class="weui_msg">
                <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
                <div class="weui_text_area">
                    <h2 class="weui_msg_title">充值成功</h2>
                    <p class="weui_msg_desc">充值账单将通过推送发给您！</p>
                </div>
                <div class="weui_opr_area">
                    <p class="weui_btn_area">
                        <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
                    </p>
                </div>
            </div>
	    </div>
	</div>
	<div id="toast" style="display: none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <p class="weui_toast_content">{{msg}}</p>
        </div>
    </div>
	<script type="text/html" id="ul_tpl">
		<a class="weui_cell choose_card" href="javascript:;">
		    <div class="weui_cell_bd weui_cell_primary">
		        <p class="card_number">{{number}}</p>
		    </div>
		    <div class="weui_cell_ft">
		    </div>
		</a>
	</script>
	<script src="__PUBLIC__/js/zepto.js"></script>
	<script type="text/javascript">
		function show_msg(msg){
	        $('.weui_toast_content').text(msg);
	        $('#toast').show();
	        setTimeout(function () {
	            $('#toast').hide();
	        }, 2000);
		}
		function refresh_bind_list(){
			
			$.post('/index.php?g=Api&m=Wxnotify&a=bind_list',{},function(res){
				if (res.code) {
					for (var i in res.data) {
						var tpl = $('#ul_tpl').html();
						tpl = tpl.replace('{{number}}',res.data[i].card_number);
						$('.bind_list').append(tpl);
					}
				}else{
					show_msg(res.msg);
				}
			},'json');
		}
		
		function step1_init(){
			$('.step1').show();
			$('.step2').hide();
			$('.step3').hide();
			$('.bind_list').html('');
			$('.bind_list').delegate('.choose_card','click',function(){
				var t = $(this);
				var card = t.find('.card_number').text();
				$('#card_number').val(card);
			})
			$.post('/index.php?g=Api&m=Wxrecharge&a=step1_init',{1:1},function(res){
				if (res.code) {
					for (var i in res.data) {
						var tpl = $('#ul_tpl').html();
						tpl = tpl.replace('{{number}}',res.data[i].card_number);
						$('.bind_list').append(tpl);
					}
				}else{
					show_msg(res.msg);
				}
			},'json');
		}
		step1_init();
		/*第一步：确认卡号*/
		function step1_post(){
			var card_number = $('.step1 [name=card_number]').val();
			$.post('/index.php?g=Api&m=Wxrecharge&a=step1_post',{card_number:card_number},function(res){
				if (res.code) {
					$('.step2-card_number').text(res.data.number);
					$('.step2-logistics_name').text(res.data.logistics_name);
					$('.step2-card_balance').text(res.data.balance);
					$('.step2-vip_name').val(res.data.vip_name);
					$('.step2-vip_phone').val(res.data.vip_phone);
					$('.step2-vip_plate_number').val(res.data.vip_plate_number);

					$('.step1').hide();
					$('.step2').show();
					$('.step3').hide();
				}else{
					show_msg(res.msg);
				}
			},'json');
		}

		/*第二步：充值信息*/
		function step2_post(){
			var card_number = $('.step2-card_number').text();
			var vip_name = $('.step2-vip_name').val();
			var vip_phone = $('.step2-vip_phone').val();
			var vip_plate_number = $('.step2-vip_plate_number').val();
			var recharge_price = $('.step2 [name=recharge_price]').val();

			$.post('/index.php?g=Api&m=Wxrecharge&a=step2_post',{card_number:card_number, vip_name:vip_name, vip_phone:vip_phone, vip_plate_number:vip_plate_number, recharge_price:recharge_price},function(res){
				if (res.code) {

					$('.step1').hide();
					$('.step2').hide();
					$('.step3').show();
				}else{
					show_msg(res.msg);
				}
			},'json');
		}

		/*第三步：完成充值*/
		function step3(){

		}

	</script>
</body>
</html>